<template>
    <header class="bg-white shadow-sm sticky top-0 z-50">
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <!-- Logo and Brand -->
          <div class="flex items-center">
            <router-link to="/" class="flex items-center">
              <i class="fa fa-robot text-primary text-2xl mr-2"></i>
              <span class="font-bold text-xl text-dark">AI助手</span>
            </router-link>
            <nav class="hidden md:ml-10 md:flex space-x-8">
              <router-link to="/" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">首页</router-link>
              <router-link to="/chat" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">聊天</router-link>
              <router-link to="/models" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">模型</router-link>
              <router-link to="/pricing" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">定价</router-link>
            </nav>
          </div>
  
          <!-- User Actions -->
          <div class="flex items-center">
            <button class="bg-primary/10 text-primary rounded-full px-4 py-2 text-sm font-medium hidden md:block hover:bg-primary/20 transition-colors">
              <i class="fa fa-rocket mr-1"></i> 升级专业版
            </button>
            
            <div class="relative ml-4">
              <button class="flex items-center text-sm font-medium text-gray-700 hover:text-primary focus:outline-none" @click="toggleDropdown">
                <img v-if="isAuthenticated" class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/1005/200/200" alt="用户头像">
                <span v-else class="bg-gray-200 h-8 w-8 rounded-full flex items-center justify-center">
                  <i class="fa fa-user text-gray-500"></i>
                </span>
                <i class="fa fa-chevron-down ml-1 text-xs"></i>
              </button>
              
              <div v-show="dropdownOpen" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 z-10">
                <router-link v-if="isAuthenticated" to="/dashboard" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                  <i class="fa fa-user-circle mr-2"></i> 个人中心
                </router-link>
                <router-link v-if="isAuthenticated" to="/chat" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                  <i class="fa fa-comments mr-2"></i> 我的对话
                </router-link>
                <router-link v-if="isAuthenticated" to="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                  <i class="fa fa-cog mr-2"></i> 设置
                </router-link>
                <div v-if="isAuthenticated" class="border-t border-gray-100 my-1"></div>
                <router-link v-if="!isAuthenticated" to="/login" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                  <i class="fa fa-sign-in mr-2"></i> 登录
                </router-link>
                <router-link v-if="!isAuthenticated" to="/register" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                  <i class="fa fa-user-plus mr-2"></i> 注册
                </router-link>
                <button v-if="isAuthenticated" @click="logout" class="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                  <i class="fa fa-sign-out mr-2"></i> 退出
                </button>
              </div>
            </div>
            
            <button class="ml-4 md:hidden text-gray-500 hover:text-primary">
              <i class="fa fa-bars text-xl"></i>
            </button>
          </div>
        </div>
      </div>
    </header>
  </template>
  
  <script>
  import { ref, computed } from 'vue'
  import { useStore } from 'vuex'
  
  export default {
    name: 'Header',
    setup() {
      const store = useStore()
      const dropdownOpen = ref(false)
      
      const isAuthenticated = computed(() => {
        return store.getters.isAuthenticated
      })
      
      const toggleDropdown = () => {
        dropdownOpen.value = !dropdownOpen.value
      }
      
      const logout = () => {
        store.dispatch('logout')
      }
      
      return {
        dropdownOpen,
        isAuthenticated,
        toggleDropdown,
        logout
      }
    }
  }
  </script>
      